<template>
	<view class="page">
		<view class="section">
			<view class="tc flex">
				<uni-icons type="left" class="flex-1 tr padding-right-default" @click="toBack"></uni-icons>
				<picker mode="selector" :value="voucherIndex" :range="checkoutList" @change="pickerChange">
					<view>
						{{voucherDate}}
					</view>
				</picker>
				<uni-icons type="right" class="flex-1 tl padding-left-default" @click="toNext"></uni-icons>
			</view>
		</view>
		<view class="section-bp flex br-b-f5">
			<view class="flex-2" @click="toLeft">
				<view class="padding-default">
					<uni-icons type="smallcircle" size="14" color="#486cd4" class="padding-right-default"></uni-icons>
					资产
				</view>
				<view class="padding-bottom-default padding-m" style="color: #486cd4;">{{asset}}</view>
			</view>
			<view>
				<uni-icons :type="iconType" size="16" class="jc-c align-c flex" style="height: 100%;"
					color="#e00bd5"></uni-icons>
			</view>
			<view class="flex-3 tr" @click="toRight">
				<view class="padding-default">
					<uni-icons type="smallcircle" size="16" color="#e10f31" class="padding-right-default"></uni-icons>
					负债和所有者权益
				</view>
				<view class="padding-bottom-default padding-m" style="color: #e10f31;">{{liability}}</view>
			</view>
		</view>
		<view class="section">
			<view class="flex padding-m br-b-f5">
				<view class="flex-3">项目</view>
				<view class="flex-1">年初数</view>
				<view>期末数</view>
			</view>
			<scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 70vh;">
				<view v-for="(reportItem,reportItemIndex) in reportItemList">
					<view v-for="(subject,subjectIndex) in reportItemList[reportItemIndex].children"
						@click="subjectClick(reportItemIndex,subjectIndex)">
						<view class="flex padding-m br-b-f5">
							<block
								v-if="reportItemList[reportItemIndex].children && reportItemList[reportItemIndex].children.lenght>0">
								<uni-icons type="down" size="16" class="jc-c align-c flex" style="height: 100%;"
									color="#a2a9a2"
									v-if="subjectIndex === subIndex&& reportIndex === reportItemIndex"></uni-icons>
								<uni-icons type="right" size="16" class="jc-c align-c flex" style="height: 100%;"
									color="#a2a9a2" v-else></uni-icons>
							</block>
							<view class="flex-3">{{subject.title}}</view>
							<view class="flex-1 padding-right-sm" :style="{color:textColor}">
								{{subject.values['年初余额']?numFilter(subject.values['年初余额']):'——'}}
							</view>
							<view :style="{color:textColor}">
								{{subject.values['期末余额']?numFilter(subject.values['期末余额']):'——'}}
							</view>
						</view>
						<view v-if="subjectIndex === subIndex && reportIndex === reportItemIndex">
							<view v-for="(balance,balanceIndex) in balanceList">
								<view class="flex padding-m br-b-f5">
									<view class="flex-3">{{balance.title}}</view>
									<view class="flex-1 padding-right-sm" :style="{color:textColor}">
										{{balance.values['年初余额']?numFilter(balance.values['年初余额']):'——'}}
									</view>
									<view :style="{color:textColor}">
										{{balance.values['期末余额']?numFilter(balance.values['期末余额']):'——'}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="flex padding-m br-b-f5">
						<view class="flex-3">{{reportItem.title}}</view>
						<view class="flex-1">{{reportItem.values['年初余额']?reportItem.values['年初余额']:'——'}}</view>
						<view>{{reportItem.values['期末余额']?reportItem.values['期末余额']:'——'}}</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import report from '../../js/api/report'

	const app = getApp()
	export default {
		data() {
			return {
				checkoutList: [],
				voucherDate: '',
				voucherIndex: 0,
				liability: 0,
				asset: 0,
				subIndex: null,
				reportIndex: null,
				balanceList: [],
				reportItemList: [],
				leftReportList: [],
				rightReportList: [],
				textColor: '#486cd4',
				iconType: "right",
			}
		},
		onLoad() {
			this.init()
		},
		watch: {
			voucherDate() {
				this.loadData()
			}
		},
		methods: {
			toNext() {
				if (this.voucherIndex === 0) {
				app.globalData.showToast(this.checkoutList[this.voucherIndex]+'是最新期数');
				} else {
					this.voucherIndex -= 1
					this.voucherDate = this.checkoutList[this.voucherIndex]
				}
			},
			toBack() {
				if (this.voucherIndex + 1 === this.checkoutList.length) {
				app.globalData.showToast('没有数据了');
				} else {
					this.voucherIndex += 1
					this.voucherDate = this.checkoutList[this.voucherIndex]
				}
			},
			init() {
				this.checkoutList = uni.getStorageSync(app.globalData.data.cache_checkout_list)
				this.voucherDate = this.checkoutList[0]
			},
			pickerChange(e) {
				this.voucherIndex = e.detail.value
				this.voucherDate = this.checkoutList[e.detail.value]
			},
			toLeft() {
				this.textColor = '#486cd4',
					this.reportItemList = this.leftReportList
			},
			toRight() {
				this.textColor = '#e10f31',
					this.reportItemList = this.rightReportList
			},
			loadData() {
				report.zcfz({
					voucherDate: this.voucherDate,
					dimension: 'TERM',
					reset: false
				}).then((res) => {
					let list = res.filter(val => val.title !== "");
					let assetIndex = list.findIndex(val => val.title === '资产总计');
					let asset = list[assetIndex];
					this.asset = asset.values['期末余额'];
					list.splice(assetIndex, 1);

					let liabIndex = list.findIndex(val => val.title === '负债和所有者权益（或股东权益）总计' || val.title ===
						'净资产合计');
					let liab = list[liabIndex];
					this.liability = liab.values['期末余额'];
					list.splice(liabIndex, 1);
					if (this.asset > this.liability) {
						this.iconType = 'right'
					} else if (this.asset < this.liability) {
						this.iconType = 'left'
					} else {
						this.iconType = 'bars'
					}
					let tree = this.toTree(list)
					tree.forEach(item => {
						if (item.isClassified && item.id === asset.parentId) {
							this.leftReportList = item.children
							this.reportItemList = item.children
						} else if (item.isClassified && item.id === liab.parentId) {
							this.rightReportList = item.children
						}
					})

				})
			},

			toTree(list) {
				const map = {}; // 用于存储每个节点的引用  
				const tree = []; // 最终的树形结构  

				// 第一步：将列表项存储到 map 中，方便后续查找  
				list.forEach(item => {
					map[item.id] = {
						...item,
						children: []
					};
				});

				// 第二步：构建树形结构  
				list.forEach(item => {
					const parent = map[item.parentId]; // 获取父节点  
					if (parent) {
						// 如果父节点存在，将当前项添加到父节点的 children 数组中  
						parent.children.push(map[item.id]);
					} else {
						// 如果父节点不存在（即当前项是根节点），将其添加到树形结构的根数组中  
						tree.push(map[item.id]);
					}
				});
				return tree;
			},
			subjectClick(reportItemIndex, index) {
				if (reportItemIndex === this.reportIndex && this.subIndex === index) {
					this.subIndex = null,
						this.reportIndex = null,
						this.balanceList = []
				} else {
					this.subIndex = index,
						this.reportIndex = reportItemIndex,
						this.balanceList = this.reportItemList[reportItemIndex].children[index].children
				}
			},

			numFilter(value) {
				if (value || value === 0) {
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				} else {
					return '-'
				}
			},
		}
	}
</script>

<style>

</style>